<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<head>
<title>艺术家</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=89166899559f1c01a228b80f745d4fb7"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style_fx.css" />
<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<script src="/js/jquery.json-2.2.min.js" type="text/javascript"></script>
</head>
<body>
	 <%@include file="../common/header.jsp" %>
		<div id="main_div">
	        <div class="div_1">
	            <h2>按地图搜索艺术家</h2>
		              <div id="l-map" style="width: 963px;height: 450px;"></div>
				         <div id="r-result">
									<div id="result"></div>
							</div> 
		       		 </div>
		       	 <%@include file="../common/footer.jsp" %>	
	    </div>


<script type="text/javascript">
var adds = [];
$(function(){	
	$.get("/mapNum.htm",function(data){
		var res = $.evalJSON(data);
		adds=res;
		bdGEO();
		//alert(adds[0].province);
	}); 
});


																	var mp = new BMap.Map(
																			"l-map");
																	mp
																			.centerAndZoom(
																					new BMap.Point(
																							103,
																							35),
																					5);
																	mp
																			.enableScrollWheelZoom();
																	var myGeo = new BMap.Geocoder();
																	function bdGEO() {
																		for ( var index = 0; index < adds.length; index++) {
																			var add = adds[index].province;
																			geocodeSearch(
																					add,
																					index);
																		}
																	}
																	function geocodeSearch(
																			add,
																			index) {
																		myGeo
																				.getPoint(
																						add,
																						function(
																								point) {
																							if (point) {
																								function ComplexCustomOverlay(
																										point,
																										text,
																										mouseoverText) {
																									this._point = point;
																									this._text = text;
																									this._overText = mouseoverText;
																								}
																								ComplexCustomOverlay.prototype = new BMap.Overlay();
																								ComplexCustomOverlay.prototype.initialize = function(
																										map) {
																									this._map = map;
																									var div = this._div = document
																											.createElement("div");
																									div.style.position = "absolute";
																									div.style.zIndex = BMap.Overlay
																											.getZIndex(this._point.lat);
																									div.style.backgroundColor = "#EE5D5B";
																									div.style.border = "1px solid #BC3B3A";
																									div.style.color = "white";
																									div.style.height = "18px";
																									div.style.padding = "2px";
																									div.style.lineHeight = "18px";
																									div.style.whiteSpace = "nowrap";
																									div.style.MozUserSelect = "none";
																									div.style.fontSize = "12px"
																									var span = this._span = document
																											.createElement("span");
																									div
																											.appendChild(span);
																									span
																											.appendChild(document
																													.createTextNode(this._text));
																									var that = this;
																									var arrow = this._arrow = document
																											.createElement("div");
																									arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
																									arrow.style.position = "absolute";
																									arrow.style.width = "11px";
																									arrow.style.height = "10px";
																									arrow.style.top = "22px";
																									arrow.style.left = "10px";
																									arrow.style.overflow = "hidden";
																									div
																											.appendChild(arrow);

																									div.onmouseover = function() {
																										this.style.backgroundColor = "#6BADCA";
																										this.style.borderColor = "#0000ff";
																										this
																												.getElementsByTagName("span")[0].innerHTML = that._overText;
																										arrow.style.backgroundPosition = "0px -20px";
																									}

																									div.onmouseout = function() {
																										this.style.backgroundColor = "#EE5D5B";
																										this.style.borderColor = "#BC3B3A";
																										this
																												.getElementsByTagName("span")[0].innerHTML = that._text;
																										arrow.style.backgroundPosition = "0px 0px";
																									}
																									div.addEventListener(
																													"click",
																													function() {
																														window.location.href = "fartist.htm?province="+adds[index].provinceCode;
																														//alert()
																													});
																									mp
																											.getPanes().labelPane
																											.appendChild(div);
																									return div;
																								}
																								ComplexCustomOverlay.prototype.draw = function() {
																									var map = this._map;
																									var pixel = map
																											.pointToOverlayPixel(this._point);
																									this._div.style.left = pixel.x
																											- parseInt(this._arrow.style.left)
																											+ "px";
																									this._div.style.top = pixel.y
																											- 30
																											+ "px";
																								}
																								var myCompOverlay = new ComplexCustomOverlay(
																										new BMap.Point(
																												point.lng,
																												point.lat),
																										adds[index].province,
																										adds[index].province+adds[index].num+"人");
																								mp
																										.addOverlay(myCompOverlay);
																							}
																						},
																						"上海市");
																	}
																</script>

</body>
</html>

